<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由传参</title>
</head>
<!-- 
   编程式路由:
    1.this.$router.push() 实现路由跳转 methods
    2.this.$router.go(n) 
    3.this.$router.forward()  前进一页
    3.this.$router.back()  前进一页
 -->
<body>
    <div id="app">
        <button @click="toHome">首页</button>
        <button @click="toNews">新闻</button>
        <button @click="toLogin">登陆</button>
        <button @click="toForward1">前进</button>
        <button @click="toForward2">前进</button>
        <button @click="toBack1">后退</button>
        <button @click="toBack2">后退</button>
 
        <router-view></router-view>
    </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>
    <script>
        const Home = {
            template:'<div>首页</div>'
        }
        const News = {
            template:
                `<div>
                  新闻:{{$route.query.id}},{{$route.query.name}}
                </div>`
        }
        const Login = {
            template:'<div>登陆</div>'
        }

        const routes = [
            {
                path:'/',
                redirect:'/home'
            },
            {
                path:'/home',
                component:Home 
            },
            {
                path:'/news',
                component:News 
            },
            {
                path:'/login',
                component:Login 
            }
        ]
        const router = VueRouter.createRouter({
            history:VueRouter.createWebHashHistory(),
            routes:routes
        })

        Vue.createApp({
            data(){
                return{
                    id:1,
                    name:'zhangsan'
                }
            },
            watch:{
                //监听路由跳转
                $route(newRoute,oldRoute){
                    console.log('watch',newRoute,oldRoute)
                }
            },
            methods:{
                toHome(){
                    this.$router.push('/home')
                },
                toNews(){
                    this.$router.push({path:'/news',query:{id:this.id,name:this.name}})
                },
                toLogin(){
                    this.$router.push('/login')
                },
                toForward1(){
                    this.$router.forward()
                },
                toForward2(){
                    this.$router.go(1)
                },
                toBack1(){
                    this.$router.back()
                },
                toBack2(){
                    this.$router.go(-1)
                },
            }
        }).use(router).mount('#app')
    </script>
</body>

</html>
